<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
const { proxy } = getCurrentInstance();
const artist = reactive([]);
const loading = ref(true)
proxy.$https.artist().then(res => {
    artist.push(res.data.artists);
    loading.value=false;
});
</script>

<template>
    <el-skeleton style="width: 240px" :loading="loading" animated :count="10">
        <template #template>
        <div style="display:flex">
            <div>
                <el-skeleton-item variant="image" style="width: 200px; height: 200px;" />
                <el-skeleton-item variant="h3" style="width: 100px;margin-top: 10px;" />
            </div>
            <div style="margin-left:20px">
                <el-skeleton-item variant="image" style="width: 200px; height: 200px;" />
                <el-skeleton-item variant="h3" style="width: 100px;margin-top: 10px;" />
            </div>
            <div style="margin-left:20px">
                <el-skeleton-item variant="image" style="width: 200px; height: 200px;" />
                <el-skeleton-item variant="h3" style="width: 100px;margin-top: 10px;" />
            </div>
            <div style="margin-left:20px">
                <el-skeleton-item variant="image" style="width: 200px; height: 200px;" />
                <el-skeleton-item variant="h3" style="width: 100px;margin-top: 10px;" />
            </div>
            <div style="margin-left:20px">
                <el-skeleton-item variant="image" style="width: 200px; height: 200px;" />
                <el-skeleton-item variant="h3" style="width: 100px;margin-top: 10px;" />
            </div>
        </div>
        </template>
        <template #default>
            <div class="big">
                <div class="bigbox" v-for="item, in artist[0]" :key="item.id" @click="$router.push('/atristMusic?id='+item.id)">
                    <img :src="item.img1v1Url" alt="">
                    <h3>{{ item.name }}</h3>
                </div>
            </div>
        </template>
    </el-skeleton>

</template>
<style scoped>
.big{
    display: flex;
    flex-wrap: wrap;
}
.bigbox{
    margin-left: 20px;
    margin-bottom: 10px;
}
.bigbox img{
    width: 200px;
    height: 200px;
    border-radius: 10px;
}
.bigbox h3{
    margin-left: 10px;
}
</style>
